<template>
    <div id="clinicAddress">
        <header>
            <i @click="goBack()"></i>
            <div>诊室认证</div>
            <!-- <span v-if="status=='details'" @click="status='edit',warn=false,org_app_status='提交审核'">编辑</span> -->
            <span v-if="status=='details'" @click="status='edit',warn=false">编辑</span>
            <span v-if="status=='edit'"  @click="save">保存</span>
            <span v-if="status=='add'"  @click="save">保存</span>
        </header>
        <div class="border-8"></div>
        <ul>
            <li>
                <a>
                    姓名:
                    <input type="text" v-model="clinicObj.realname" placeholder="请输入真实姓名"  required :disabled="status=='details'" @focus='$utils.focus($event)'/>
                </a>
            </li>
            <li>
                <a>
                    手机号:
                    <input type="text" v-model="clinicObj.tel" disabled placeholder="请输入手机号"  required :disabled="status=='details'" @focus='$utils.focus($event)'/>
                </a>
            </li>
            <li>
                <a>
                    身份证号:
                    <input type="text" v-model="clinicObj.cardid" placeholder="请输入身份证号码"  required :disabled="status=='details'"  @focus='$utils.focus($event)'/>
                </a>
            </li>
            <li>
                <a>
                    诊室名称:
                    <input type="text" v-model="clinicObj.clinicname" placeholder="输入具体名称"  required :disabled="status=='details'"  @focus='$utils.focus($event)'/>
                </a>
            </li>
            <li>
                <a>
                    <div class='cType'>
                        诊室类型:
                            <label @change="select()">
                                <input type="radio" v-model='clinicObj.clinictype' value="直营" :disabled="status=='details'">
                                <i></i>直营
                            </label>
                            <label @change="select()">
                                <input type="radio" v-model='clinicObj.clinictype' value="联营" :disabled="status=='details'">
                                <i></i>联营
                            </label>  
                    </div>
                </a>
            </li>    
            <li>
                <a>
                    诊室详细地址:
                    <textarea v-model="clinicObj.address" placeholder="请输入详细地址(省+城市+区县+街道，注：请与执业机构地址一致)"  required :disabled="status=='details'"  @focus='$utils.focus($event)'></textarea>
                </a>
            </li> 
            <li>
                <a>
                    诊室营业执照:
                    <el-upload
                        class="avatar-uploader"
                        :action='$api.baseURLUpload+"/photos/upload_shop"'
                        :show-file-list="false"
                        :on-success="(res,file)=>{
                            return handleAvatarSuccess(res,file,0)
                        }"
                        :before-upload="beforeAvatarUpload"
                        :disabled="status=='details'">
                        <img v-if="clinicObj.buspic" :src="clinicObj.buspic" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </a>
            </li>
            <li>
                <a>
                    诊室检报:
                    <el-upload
                        class="avatar-uploader"
                        :action='$api.baseURLUpload+"/photos/upload_shop"'
                        :show-file-list="false"
                        :on-success="(res,file)=>{
                            return handleAvatarSuccess(res,file,1)
                        }"
                        :before-upload="beforeAvatarUpload"
                        :disabled="status=='details'">
                        <img v-if="clinicObj.reportpic" :src="clinicObj.reportpic" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </a>
            </li>
            <li>
                <a>
                    诊室环境:
                    <el-upload
                        class="avatar-uploader"
                        :action='$api.baseURLUpload+"/photos/upload_shop"'
                        :show-file-list="false"
                        :on-success="(res,file)=>{
                            return handleAvatarSuccess(res,file,2)
                        }"
                        :before-upload="beforeAvatarUpload"
                        :disabled="status=='details'">
                        <img v-if="envirPic[0]" :src="envirPic[0]" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <el-upload
                        class="avatar-uploader"
                        :action='$api.baseURLUpload+"/photos/upload_shop"'
                        :show-file-list="false"
                        :on-success="(res,file)=>{
                            return handleAvatarSuccess(res,file,3)
                        }"
                        :before-upload="beforeAvatarUpload"
                        :disabled="status=='details'">
                        <img v-if="envirPic[1]" :src="envirPic[1]" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <el-upload
                        class="avatar-uploader"
                        :action='$api.baseURLUpload+"/photos/upload_shop"'
                        :show-file-list="false"
                        :on-success="(res,file)=>{
                            return handleAvatarSuccess(res,file,4)
                        }"
                        :before-upload="beforeAvatarUpload"
                        :disabled="status=='details'">
                        <img v-if="envirPic[2]" :src="envirPic[2]" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <el-upload
                        class="avatar-uploader"
                        :action='$api.baseURLUpload+"/photos/upload_shop"'
                        :show-file-list="false"
                        :on-success="(res,file)=>{
                            return handleAvatarSuccess(res,file,5)
                        }"
                        :before-upload="beforeAvatarUpload"
                        :disabled="status=='details'">
                        <img v-if="envirPic[3]" :src="envirPic[3]" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <el-upload
                        class="avatar-uploader"
                        :action='$api.baseURLUpload+"/photos/upload_shop"'
                        :show-file-list="false"
                        :on-success="(res,file)=>{
                            return handleAvatarSuccess(res,file,6)
                        }"
                        :before-upload="beforeAvatarUpload"
                        :disabled="status=='details'">
                        <img v-if="envirPic[4]" :src="envirPic[4]" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </a>
            </li>
        </ul>
        <div class="tankuang" v-show="warn" @click="warn=false">
           原因：{{status_des}}
        </div>
        <a class="confirmBtn" v-show='org_app_status'>
            {{org_app_status}}
        </a>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                status_des:'',
                warn:false,
                status: 'add',  //是查看还是编辑
                envirPic: [],
                clinicObj: {
                    realname: '',
                    id: '',
                    tel: '',
                    cardid: '',
                    clinicname: '',  //诊室名称
                    clinictype: '', //诊室类型 直营or联营
                    address: '',  //诊室详细地址
                    lng_lat: '',
                    buspic: '',   //诊室营业执照
                    reportpic: '',  //诊室检报 (合格 不合格)  
                    envirPic: '',
                    city: '',  //诊室所在市
                },
                org_app_status: '',  //审核状态
            }
        },
        components: {
        },
        methods: {
            // 判断是否审核通过
            isPass() {
                //判断用户是否认证 如果认证审核通过  org_app_status 0已提交未审核  1审核通过  2审核失败
                this.$api.get(this.$api.baseURLSchool,"select_cid/user/"+localStorage.getItem("loginMobile"),{},r => {
                    console.log('****-',r.data);
                    if(r.data.info.org_app_status=="1") {
                        this.org_app_status = "审核通过";
                    } else if(r.data.info.org_app_status==="0") {
                        this.org_app_status = "审核中";
                    }  else if(r.data.info.org_app_status=="2") {
                        this.org_app_status = "审核失败";
                        this.warn=true;
                        this.status_des=r.data.info.status_des
                    }
                },err => {
                    console.log(err);
                })
                
            },
            goBack() {
                this.$router.back();
            },
            // 初始化
            init() {
                this.clinicObj.id = localStorage.getItem("loginMobile");
                this.$api.get(this.$api.baseURLSchool,"select_cid/clinic/"+this.clinicObj.id,{},r => {
                    console.log('****',r);
                    if(r.data.ret == 1) {
                        this.status = 'details';
                        this.clinicObj = r.data.info;
                        this.envirPic = JSON.parse(this.clinicObj.envirPic);
                    } else {
                        this.status = 'add';
                    }
                },err => {
                    console.log(err);
                })
            },
            //选择直营or联营
            select() {
                console.log(this.clinicObj.clinictype);
            },
            //上传图片
            handleAvatarSuccess(res, file, i) {
                console.log(res);
                if(res.state == 200) {
                    if(i == 0) {
                        this.$set(this.clinicObj,'buspic',res.result_origin);
                    }else if(i == 1) {
                        this.$set(this.clinicObj,'reportpic',res.result_origin);
                    }else if(i > 1) {
                        this.$set(this.envirPic,i-2,res.result_origin);
                    }
                }
            },
            beforeAvatarUpload(file) {
                if(!/image\/\w+/.test(file.type)) {
                    this.$utils._toast('请确保文件为图像类型');
                    return false;
                }
                if(file.size > 5 * 1024 * 1024) {
                    this.$utils._toast('上传图片不能超过5M');
                    return false;
                }
            },
            //把地址转化成经纬度
            changeAddressToLen() {
                var url = 'http://api.map.baidu.com/geocoder/v2/?ak=WM517NoISwXN6sQGHZPM5rxK3lgC355d&output=json&address=' + encodeURIComponent(this.clinicObj.address);
                //根据地点名称获取经纬度信息
                const _this = this;
                $.ajax({
                    type: "POST",
                    url: url,
                    dataType: "JSONP",
                    success: function (data) {
                        // console.log(data);
                        if (parseInt(data.status) == 0) {
                            _this.clinicObj.lat_lng = data.result.location.lat + ',' + data.result.location.lng;
                            _this.changeLenToCity(data.result.location.lng,data.result.location.lat);
                        }
                    }
                });
            },
            //根据经纬度获取诊所所在市
            changeLenToCity(lng,lat) {
                var _this = this;
                var url = 'http://api.map.baidu.com/geocoder/v2/?ak=WM517NoISwXN6sQGHZPM5rxK3lgC355d&output=json&pois=1&location=' + lat + "," + lng;
                $.ajax({
                    type: "POST",
                    url: url,
                    dataType: "JSONP",
                    success: function (data) {
                        if (parseInt(data.status) == 0) {
                            // console.log(data.result.addressComponent);
                            _this.clinicObj.city = data.result.addressComponent.city;
                        }
                    }
                });
            },
            //把用户状态改成已提交未审核
            commit() {
                const obj = {
                    id: this.clinicObj.id,
                    org_app_status: '0',
                }
                this.$api.post(this.$api.baseURLSchool,"updatedata/user/edit",obj,r => {
                    console.log(r);
                    if(r.data.ret == 1) {
                        this.org_app_status == '审核中';
                    }
                },err => {
                    console.log(err);
                })
            },
            //保存
            save() {
                if(this.org_app_status=='审核通过'||this.org_app_status=='审核中'){
                    return;
                }
                this.clinicObj.envirPic = JSON.stringify(this.envirPic);
                this.changeAddressToLen();
                var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
                if(!this.clinicObj.realname)  {  
                    this.$utils._toast("真实姓名为必填项！");  
                    return  false;  
                } 
                else if(!this.clinicObj.tel)  {  
                    this.$utils._toast("手机号为必填项！");  
                    return  false;  
                } else if(!/^1(3|4|5|7|8|9)\d{9}$/.test(this.clinicObj.tel))  {  
                    this.$utils._toast("手机号不合法！");  
                    return  false;  
                } 
                else if(!this.clinicObj.cardid)  {  
                    this.$utils._toast("身份证号为必填项！");  
                    return  false;  
                } else if(reg.test(this.clinicObj.cardid) === false)  {  
                    this.$utils._toast("身份证号不合法");  
                    return  false;  
                } else if(!this.clinicObj.clinicname)  {  
                    this.$utils._toast("诊室名称为必填项！");  
                    return  false;  
                } else if(!this.clinicObj.clinictype)  {  
                    this.$utils._toast("诊室类型为必填项！");  
                    return  false;  
                } else if(!this.clinicObj.address)  {  
                    this.$utils._toast("诊室地址为必填项！");  
                    return  false;  
                } else if(!this.clinicObj.buspic)  {  
                    this.$utils._toast("诊室营业执照为必选项！");  
                    return  false;  
                } else if(!this.clinicObj.reportpic)  {  
                    this.$utils._toast("诊室检报为必选项！");  
                    return  false;  
                } else if(!this.envirPic.length)  {  
                    this.$utils._toast("诊室环境图至少一张");  
                    return  false;  
                } else {   
                    if(this.status == 'add') {
                        this.$api.post(this.$api.baseURLSchool,"updatedata/clinic/add",this.clinicObj,r => {
                            // console.log(r);
                            if(r.data.ret == 1) {
                                this.commit();
                                this.$utils._toast("保存成功");
                                setTimeout(() => {
                                    this.goBack();
                                },300);
                            }
                        },err => {
                            console.log(err);
                        })
                    }else if(this.status == 'edit') {
                        setTimeout(() => {
                            this.$api.post(this.$api.baseURLSchool,"updatedata/clinic/edit",this.clinicObj,r => {
                                if(r.data.ret == 1) {
                                    this.$utils._toast("修改成功,敬请审核。。。");
                                    setTimeout(() => {
                                        this.goBack();
                                    },300);
                                }
                            },err => {
                                console.log(err);
                            })
                        }, 300);
                        
                    }
                } 
            },

        },
        created() {
            this.init();
            this.isPass();
        },
        mounted() {
        }
    }
  </script>
  <style lang="scss" scoped>
    .tankuang {
      word-wrap: break-word;
      word-break: normal;
      border-radius:8px;
      width: 70%;
    overflow: auto;
    height: 1rem;
      letter-spacing: 0.5px;
      overflow-y: auto;
      background: linear-gradient(to bottom, #fff, 70%, #d3d1d1);
      position: absolute;
      top: 50%;
      text-align: justify;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      padding: 15px;
    align-items: center;
    display: flex;
    justify-content: space-around;
    }
  </style>
  